<template>
    <el-card>
      <el-row>
        <el-input
          placeholder="搜索关键词"
          v-model="searchKeyword"
          class="search-input"
        />
        <el-button type="primary" @click="fetchData">搜索</el-button>
        <el-button type="success" @click="addItem">新增</el-button>
      </el-row>
      <el-table :data="tableData" border style="margin-top: 20px">
        <el-table-column prop="id" label="序号" width="80" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="status" label="状态" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button type="text" size="small" @click="editItem(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="handlePageChange"
        layout="prev, pager, next"
      />
    </el-card>
  </template>
  
  <script>
  export default {
    data() {
      return {
        searchKeyword: '',
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
      };
    },
    methods: {
      fetchData() {
        // 模拟 API 数据请求
        this.tableData = [
          { id: 1, name: '用户A', status: '启用', createTime: '2024-11-19 10:23' },
          { id: 2, name: '用户B', status: '停用', createTime: '2024-11-18 14:55' },
        ];
        this.total = 50; // 假设总条目数
      },
      handlePageChange(page) {
        this.currentPage = page;
        this.fetchData();
      },
      addItem() {
        console.log('新增操作');
      },
      editItem(row) {
        console.log('编辑操作', row);
      },
      deleteItem(row) {
        console.log('删除操作', row);
      },
    },
    mounted() {
      this.fetchData();
    },
  };
  </script>
  
  <style>
  .search-input {
    width: 200px;
    margin-right: 10px;
  }
  </style>
  